<nav
  class="navbar navbar-expand-lg navbar-light"
  style="webkit-box-shadow: 0 4px 12px 0 rgba(0,0,0,.05)!important;"
>
  <div class="header">
    <div class="logo">
      <img src="https://i.imgur.com/AWm93ID.png" /><span
        class="navbar-brand"
      ></span>
    </div>

    <div class="menu">
      <button
        class="pointer"
        *ngFor="let option of options | keyvalue: sortNull"
        (click)="formatText(option.value)"
        #tooltip="matTooltip"
        [matTooltip]="toolbar[option.value].text"
        [matTooltipPosition]="'below'"
      >
        <i-feather class="fe-icon" [name]="option.value"></i-feather>
      </button>

      <button
        class="pointer"
        (click)="openEmojiDialog()"
        #tooltip="matTooltip"
        [matTooltip]="'Add Emoji ⌘+Shift+E'"
        [matTooltipPosition]="'below'"
      >
        <i-feather class="fe-icon" name="smile"></i-feather>
      </button>

      <button
        class="pointer"
        (click)="formatText(CONTRIB_GUIDELINES_SELECT)"
        #tooltip="matTooltip"
        [matTooltip]="'Add Contributing Guidelines'"
        [matTooltipPosition]="'below'"
      >
        <i-feather class="fe-icon" name="git-merge"></i-feather>
      </button>

      <button
        class="pointer"
        (click)="formatText(CONTRIB_LIST)"
        #tooltip="matTooltip"
        [matTooltip]="'Add Contributors List'"
        [matTooltipPosition]="'below'"
      >
        <i-feather class="fe-icon" name="users"></i-feather>
      </button>

      <button
        class="pointer"
        (click)="formatText(LICENCE_SELECT)"
        #tooltip="matTooltip"
        [matTooltip]="'Add Licence'"
        [matTooltipPosition]="'below'"
      >
        <i-feather class="fe-icon" name="book"></i-feather>
      </button>

      <button
        class="pointer"
        (click)="copyMarkup()"
        #tooltip="matTooltip"
        [matTooltip]="'Copy Markdown ⌘+Shift+M'"
        [matTooltipPosition]="'below'"
      >
        <i-feather class="fe-icon" name="copy"></i-feather>
      </button>

      <button
        class="pointer"
        (click)="downloadMarkup()"
        #tooltip="matTooltip"
        [matTooltip]="'Download Markdown ⌘+Shift+S'"
        [matTooltipPosition]="'below'"
      >
        <i-feather class="fe-icon" name="download"></i-feather>
      </button>

      <!-- <button class="pointer" (click)="downloadMarkup()" #tooltip="matTooltip" [matTooltip]="'Load Template ⌘+Shift+S'"
        [matTooltipPosition]="'below'">
        <i-feather class="fe-icon" name="package"></i-feather>
      </button> -->
      <button
        class="pointer"
        (click)="newFile()"
        #tooltip="matTooltip"
        [matTooltip]="'New Markdown'"
        [matTooltipPosition]="'below'"
      >
        <i-feather class="fe-icon" name="loader"></i-feather>
      </button>
      <button
        class="pointer"
        (click)="loadMarkup()"
        #tooltip="matTooltip"
        [matTooltip]="'Load Saved Markdown'"
        [matTooltipPosition]="'below'"
      >
        <i-feather class="fe-icon" name="hard-drive"></i-feather>
      </button>

      <button
        class="pointer"
        (click)="saveMarkup()"
        #tooltip="matTooltip"
        [matTooltip]="'Save as Template'"
        [matTooltipPosition]="'below'"
      >
        <i-feather class="fe-icon" name="save"></i-feather>
      </button>
    </div>

    <div class="menu end">
      <span
        *ngIf="!fileName"
        #tooltip="matTooltip"
        [matTooltip]="'Unsaved File, Click on save icon to save markdown.'"
        [matTooltipPosition]="'below'"
      >
        <i-feather class="fe-icon warning" name="alert-circle"></i-feather>
        {{ fileName ? fileName : "Untitled" }}</span
      >
      <span *ngIf="fileName">
        <i-feather class="fe-icon warning" name="file"></i-feather>
        {{ fileName }}</span
      >

      <a>
        <ntkme-github-button
          class="github-star"
          user="jp1016"
          repo="markdown"
          count="true"
        >
        </ntkme-github-button>
      </a>
      <a href="https://twitter.com/jp1016v1" target="_blank">
        <i-feather class="fe-icon" name="twitter"></i-feather>
      </a>

      <a (click)="toggleMode()" class="pointer">
        <i-feather class="fe-icon" name="moon" *ngIf="!isDarkMode"></i-feather>
        <i-feather class="fe-icon" name="sun" *ngIf="isDarkMode"></i-feather>
        <!-- <i-feather class="fe-icon" name="sun"></i-feather> -->
      </a>
    </div>
  </div>
  <ng-keyboard-shortcuts [shortcuts]="shortcuts"></ng-keyboard-shortcuts>
</nav>
